<template>
  <fullscreen :fullscreen.sync="fullscreen" style="background: #ffffff;position: relative;width: 100%;height: 800px;">
    <div id="chart-container" style="position: relative;width: 100%;height:100%;">
<!--      <h1>自定义脑图-Node节点-实现虚拟滚动</h1>-->
      <div id="treeChart"></div>
      <div id="minimap"></div>
      <Menu :type="activeData.levelType" v-show="showMenu" :style="menuStyle" @childrenExpand="childrenExpand" @parentExpand="parentExpand" @addPaging="addPaging" />
      <ToolMenu @resetLayout="resetLayout" @resetCenter="resetCenter" @fullScreen="fullscreen = true" @closeScreen="fullscreen = false" />
    </div>
  </fullscreen>
</template>

<script>
import ChartGraph from "./lib/MindMap";
import Menu from './components/Menu'
import {findItem} from "@/view/MindMap/lib/utils";
import {chartDataV2,createNodePagingList} from "./lib/mock";
import ToolMenu from "@/view/MindMap/components/ToolMenu";
import Vue from 'vue';
import fullscreen from 'vue-fullscreen'
Vue.use(fullscreen)
let TreeData = chartDataV2

export default {
  name: 'MindMap',
  components: {
    Menu,
    ToolMenu
  },
  data() {
    return {
      showMenu: false,
      activeNode: {},
      activeData: {},
      fullscreen: false,
      menuPosition: {
        x: 0,
        y: 0
      }
    }
  },
  computed: {
    menuStyle() {
      const {x, y} = this.menuPosition
      return {left: x + 'px', top: y + 'px'}
    }
  },
  chartGraph: null,
  mounted() {
    const chartGraph = new ChartGraph('treeChart', 'minimap')
    this.chartGraph = chartGraph
    chartGraph.graph.on('blank:click', () => this.hideMenu())
    chartGraph.graph.on('graph:mouseleave', () => this.hideMenu())
    chartGraph.on('nodeRightClick', this.nodeRightClick)
    chartGraph.graph.on('cell:click', ({cell}) => {
      const Edges = chartGraph.graph.getConnectedEdges(cell, {deep: true,indirect: false})
      const edges = chartGraph.graph.getEdges()
      edges.forEach((item) => {
        item.attr('line/strokeDasharray', '')
        item.attr('line/stroke', '#5F95FF')
        item.attr('line/style/animation', '')
        item.setZIndex(1)
      })
      Edges.forEach((item) => {
        item.setZIndex(10)
        item.attr('line/strokeDasharray', 5)
        item.attr('line/stroke', '#52c41a')
        item.attr('line/style/animation', 'running-line 30s infinite linear')
      })
    })
    chartGraph.render(TreeData)
    this.chartGraph.setRoot(TreeData.id)
  },
  methods: {
    nodeRightClick({el, node}) {
      this.showMenu = true
      this.menuPosition = {x: el.layerX, y: el.layerY}
      this.activeNode = node
      this.activeData = node.data || {}
    },
    hideMenu() {
      this.showMenu = false
      this.activeNode = null
    },
    // 展开子节点
    childrenExpand() {
      const activeNodeId = this.activeNode.id
      const activeNodeData = findItem(activeNodeId, TreeData)
      if (activeNodeData.children) {
        activeNodeData.children.push({
          id: Date.now() + '.' + Date.now(),
          levelType: activeNodeData.levelType
        })
      } else {
        activeNodeData.children = [{
          id: Date.now() + '.' + Date.now(),
          levelType: activeNodeData.levelType
        }]
      }
      this.chartGraph.render(TreeData)
      this.hideMenu()
    },
    parentExpand(){
      const activeNodeId = this.activeNode.id
      const activeNodeData = findItem(activeNodeId, TreeData)
      console.log(activeNodeData);
      if (activeNodeData.children) {
        activeNodeData.children.push({
          id: Date.now() + '.' + Date.now(),
          levelType: activeNodeData.levelType
        })
      } else {
        activeNodeData.children = [{
          id: Date.now() + '.' + Date.now(),
          levelType: activeNodeData.levelType
        }]
      }
      this.chartGraph.render(TreeData)
      this.hideMenu()
    },
    addPaging(){
      const activeNodeId = this.activeNode.id
      const activeNodeData = findItem(activeNodeId, TreeData)
      if (activeNodeData.children) {
        activeNodeData.children.push({
          id: Date.now() + '.' + Date.now(),
          levelType: activeNodeData.levelType,
          nodeType: 'paging',
          data: createNodePagingList()
        })
      } else {
        activeNodeData.children = [{
          id: Date.now() + '.' + Date.now(),
          levelType: activeNodeData.levelType,
          nodeType: 'paging',
          data: createNodePagingList()
        }]
      }
      this.chartGraph.render(TreeData)
      this.hideMenu()
    },
    resetLayout(){
      this.chartGraph.render(TreeData)
    },
    resetCenter(){
      this.chartGraph.resetCenter()
    }
  }
}
</script>

<style scoped>

</style>
